<template>
  <div class="pc-head" :class="{'not-home':notHome}">
    <div class="content flex-center-stright">
      <div class="logo-box flex-left">
        <img :src="hlogo" class="logo" v-if="!notHome">
        <img :src="logo" class="logo" v-if="notHome">
        <span :style="notHome?'color:#b7b7ad':'color:#fff'">{{title}}</span>
      </div>
      <pc-nav :notHome="notHome"></pc-nav>
      <pc-search v-if="notHome"></pc-search>
    </div>
  </div>
</template>
<script>
import PcSearch from "./Search";
import PcNav from "./Nav";
export default {
  props: ["notHome"],
  components: {
    PcNav,
    PcSearch
  },
  data() {
    return {
      routeList: ["/home", "/token"]
    };
  },
  computed: {
    hlogo() {
      return require(`@/assets/img/logo${process.env.VUE_APP_HOMELOGO_URL}`);
    },
    logo() {
      return require(`@/assets/img/logo${process.env.VUE_APP_LOGO_URL}`);
    },
    title() {
      return process.env.VUE_APP_BRAND_NAME;
    }
  }
};
</script>

<style lang="scss">
.pc-head {
  height: 70px;
  min-width: 1250px;
  background: $home_head;
  .logo-box {
    display: inline-flex;
    img {
      width: 45px;
      margin-right: 15px;
    }
    span {
      font-size: 18px;
      font-weight: 550;
      color: #b7b7ad;
    }
  }
  .back {
    margin-left: 40px;
    width: 106px;
    height: 30px;
    background: rgba(255, 255, 255, 1);
    border-radius: 19px;
    color: #2675ba;
    cursor: pointer;
  }
  .content {
    position: relative;
    width: 1250px;
    height: 100%;
    padding: 0 25px;
    margin: 0 auto;
    .head-nav {
      position: absolute;
      height: 70px;
      width: 650px;
      top: 0;
      right: 0;
      color: $white;
      font-size: 14px;
      font-weight: 500;
      font-family: PingFangSC-Medium;
    }
  }
}
.not-home {
  background: $white;
  height: 120px;
  box-shadow: 0px 2px 4px 0px rgba(231, 238, 244, 1);
  .back {
    margin-top: 28px;
    background: rgba(99, 104, 222, 1);
    color: #fff;
  }
  .content {
    display: block;
    .logo-box {
      margin: 18px 0 0 12px;
    }
    .head-nav {
      top: 55px;
      left: 0;
      bottom: 0;
      color: $black;
    }
  }
}

// 动画区
</style>

